site_8g/src/app/[locale]/(TabBar)/[[...share]]/_home/HomePromotion.tsx

"use client";
import { PromotionRep } from "@/api/home";
import Box from "@/components/Box";
import { Mask } from "antd-mobile";
import { FC, MouseEvent, useEffect, useState } from "react";

import dayjs from "dayjs";
import Image from "next/image";
import { Pagination } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";

interface Props {
    data?: PromotionRep[];
    type?: 1 | 2; // 每天只弹一次 /  每次登录都弹
}

const HomePromotion: FC<Props> = (props) => {
    const { data, type } = props;
    const [visible, setVisible] = useState(false);

    useEffect(() => {
        const isClosePromotion = sessionStorage.getItem("isClosePromotion");
        // 如果 type 为 1  && 有isNow为true 表示已经弹出，
        const shouldShowPromotion = () => {
            // 如果不等于1而数据又是时间，清除
            if (type !== 1 && dayjs().isSame(isClosePromotion, "days")) {
                sessionStorage.removeItem("isClosePromotion");
                return true;
            }
            if (type === 1) {
                return !dayjs().isSame(isClosePromotion, "days");
            } else if (type === 2) {
                return !isClosePromotion;
            }
            return false;
        };
        let flag = shouldShowPromotion();
        setVisible(flag);
    }, []);

    const closeHandler = (e: MouseEvent<HTMLElement>) => {
        e.stopPropagation();
        setVisible(false);
        if (type === 1) {
            sessionStorage.setItem("isClosePromotion", dayjs().format("YYYY-MM-DD"));
        }

        if (type === 2) {
            sessionStorage.setItem("isClosePromotion", "true");
        }
    };

    if (data && data.length === 0) return null;
    return (
        <div>
            <Mask visible={visible} onMaskClick={(e) => closeHandler(e)}>
                <div
                    className={
                        "promotion-swiper absolute left-1/2 top-[18%] max-w-[3.139rem]" +
                        " -translate-x-1/2"
                    }
                >
                    {/*<div*/}
                    {/*    style={{*/}
                    {/*        clipPath: "polygon(26% 0, 100% 69%, 100% 0)",*/}
                    {/*        background: "rgba(0,0,0,0.5)",*/}
                    {/*    }}*/}
                    {/*    className={*/}
                    {/*        "absolute right-[0.1111rem] top-[0.0694rem] z-[10] h-[0.5556rem] w-[0.5556rem]" +*/}
                    {/*        " rounded-tr-[0.1389rem]"*/}
                    {/*    }*/}
                    {/*>*/}
                    {/*    <i className={"iconfont icon-guanbi absolute right-[20%] top-[5%]"}></i>*/}
                    {/*    /!*<i className={"iconfont icon-guanbi"}></i>*!/*/}
                    {/*    /!*<div*!/*/}
                    {/*    /!*    onClick={closeHandler}*!/*/}
                    {/*    /!*    className={*!/*/}
                    {/*    /!*        "z-20 h-0 w-0 [border-width:0_1.3889rem_1.3889rem_0]" +*!/*/}
                    {/*    /!*        " [border-color:transparent_#007bff_transparent_transparent]" +*!/*/}
                    {/*    /!*        " [border-color: red] flex"*!/*/}
                    {/*    /!*    }*!/*/}
                    {/*    /!*>*!/*/}
                    {/*    /!*    <i className={"iconfont icon-guanbi ml-[0.3472rem] mt-[0.0694rem]"}></i>*!/*/}
                    {/*    /!*</div>*!/*/}
                    {/*</div>*/}

                    {/*<i className={"iconfont icon-guanbi"}></i>*/}
                    <Swiper
                        loop
                        pagination={{ clickable: true }}
                        spaceBetween={10}
                        scrollbar={{ draggable: true }}
                        modules={[Pagination]}
                        slidesPerView={1}
                        grabCursor={true}
                        navigation={true}
                        className={"min-h-[3.8rem]"}
                    >
                        {data?.map((promotion, index) => (
                            <SwiperSlide key={index}>
                                <Box
                                    action={promotion.action_type}
                                    actionData={promotion.action_params}
                                >
                                    <div
                                        onClick={(e) => closeHandler(e)}
                                        className={
                                            "relative h-[3.4722rem] w-[100%] rounded-[0.1389rem]"
                                        }
                                    >
                                        <div
                                            style={{
                                                clipPath: "polygon(26% 0, 100% 69%, 100% 0)",
                                                background: "rgba(0,0,0,0.5)",
                                            }}
                                            className={
                                                "absolute -top-[0.2px] right-0 z-[10]" +
                                                " h-[0.5556rem] w-[0.5556rem]" +
                                                " rounded-tr-[0.1389rem]"
                                            }
                                        >
                                            <i
                                                className={
                                                    "iconfont icon-guanbi absolute right-[16%]" +
                                                    " top-[5%] text-[0.1111rem]"
                                                }
                                            ></i>
                                        </div>
                                        <Image
                                            width={400}
                                            height={400}
                                            className={"h-[100%] w-[100%] rounded-[0.1389rem]"}
                                            src={promotion.content.image!}
                                            alt={promotion.content.title!}
                                        />
                                    </div>
                                </Box>
                            </SwiperSlide>
                        ))}
                    </Swiper>
                </div>
            </Mask>
        </div>
    );
};

export default HomePromotion;